import { connect } from 'react-redux'
import { useEffect, useState, Fragment } from 'react'
import { Layout, Spin } from 'antd'
import { ManOutlined,WomanOutlined } from '@ant-design/icons';

import NotFound from '../notFound'

import {
	wrapper,
	header,
	avator,
	avator_img,
	header_introduce,
	header_wrapper,
	username,
	userid,
	gender,
	modify,
	content,
	content_introduce,
	content_sider,
	tip,
	introduction_txt,
} from './index.module.css'

import { imgUrlDev } from '../../assets/js/tools'
import { getUserInfo } from '../../assets/js/api'

const { Content, Sider } = Layout;

function InfoContent(props) {
	
	const { history, islogin, user } = props;

	const { id } = props.match.params;
	const [info, setInfo] = useState(user);
	const [userNone, setUserNone] = useState(false);
	// canset是否打开修改信息按钮
	const [canSet, setCanSet] = useState(false);
	const [loading, setLoading] = useState(true);


	useEffect(() => {
		// 是自身则不进行数据请求
		if (islogin && user.id === +id) {
			setInfo({...user});

			setLoading(false);
			setUserNone(false);
			setCanSet(true);
		} else {
			setCanSet(false);

			getUserInfo({id})
			.then(res => {
				const {code, message, data} = res.data;
				if (code === 1) {
					setInfo({...data});
					// setUserNone(false);
				} else {
					setUserNone(true);
					Promise.reject(message);
				}
			})
			.catch(err => {
				console.log(err);
				setUserNone(true);
			})
			.finally(() => {
				setLoading(false);
			});
		}
	}, [islogin, user, id]);
	function toModify() {
		history.push({pathname: '/info/setting'});
	}




    return (
        <div className={wrapper}>
			{
				loading ? 
					<div className="mask">
						<Spin spinning={loading} size='large' />
					</div> : ''
					
			}
			{
				userNone ? 
					<NotFound>该用户不存在</NotFound> :
					<Fragment>
						<div className={header}>
							{
								loading ? 
									'' : 
									<div className={header_wrapper}>
										<div className={avator}>
											<img className={avator_img} src={imgUrlDev(info.avator)} alt="" />
										</div>
										<div className={header_introduce}>
											<p className={username}>{info.name}
												{
													info.gender !== '2' ? 
														<span className={gender} style={{color: info.gender === '0' ? '#eb2f96' : '#008dff'}}>
															{ info.gender === '0' ? <WomanOutlined /> : <ManOutlined /> }
														</span>
														: ''
												}
											</p>
											<p className={userid}>id：{info.account}</p>
										</div>
										{ canSet ? <div className={modify} onClick={toModify}>修改</div> : '' }
									</div>
							}
						</div>
						<Layout className={content}>
							{
								loading ? 
									'' : 
									<Fragment>
										<Content className={content_introduce}>
											<div>
												<span className={tip}>个人介绍：</span>
												<span className={introduction_txt}>{info.introduction}</span>
											</div>
										</Content>
										<Sider className={content_sider}></Sider>
									</Fragment>
							}
						</Layout>
					</Fragment>
			}
		</div>
    )
}


function mapStateToProps(state) {
	return {
		islogin: state.islogin,
		user: state.user
	}
}
export default connect(
	mapStateToProps, 
	{}
)(InfoContent);